<template>
  <div class="common-layout">
    <el-container>
        <el-header height="25%">
      <el-page-header :icon="null" @back="backout">
  <template #content>
    <div class="flex items-center">

      <span class="text-sm mr-2" style="color: var(--el-text-color-regular)">
        帖子管理
      </span>
      <el-tag>admin</el-tag>
      <!--点击“相关统计管理，跳转出几个统计图形” <el-button style="margin-left: 16px" @click="drawer = true">
            相关统计管理
          </el-button>

          <el-drawer size=50% v-model="drawer" title="I am the title" :with-header="false" direction="btt">
            <span>    
              <el-row>
              <EchartsChart></EchartsChart>
              <EchartsChart1></EchartsChart1>
              <EchartsChart2></EchartsChart2>
              <EchartsChart3></EchartsChart3>
              </el-row>
            </span>
          </el-drawer> -->
    </div>
  </template>


</el-page-header>
<el-divider content-position="right">管理员操作</el-divider><!--分割线-->
<!--开头四个大框总览-->
<tr>
<button type="button" class="btn btn-primary" style="height: 90px;margin-right: 100px;margin-left: 300px;">
<tr>帖子总数</tr> 
<tr><span class="badge text-bg-secondary">{{countInfo.count_contents}}</span></tr>
</button>
<button type="button" class="btn btn-primary" style="height: 90px;margin-right: 100px;">
<tr>转发总数</tr> 
<tr><span class="badge text-bg-secondary">{{countInfo.count_repost}}</span></tr>
</button>
<button type="button" class="btn btn-primary" style="height: 90px;margin-right: 100px;">
<tr>评论总数 </tr>
<tr><span class="badge text-bg-secondary">{{countInfo.count_comment}}</span></tr>
</button>
<button type="button" class="btn btn-primary" style="height: 90px;margin-right: 100px;">
<tr>点赞总数</tr> 
<tr><span class="badge text-bg-secondary">{{countInfo.count_like}}</span></tr>
</button>
</tr>
<!--折线图-->
<tr >
  <EchartsChart1 style="margin-top: 50px;"></EchartsChart1>
</tr>
       </el-header>
<br >
<br>
<br>
  <!-- 此为用户信息管理头部 -->
  <p class="sub-title" style="margin-left: 600px;">最近十天发帖概况</p>
  <el-divider content-position="right"></el-divider><!--分割线-->
      <el-main>
      <!-- 页面主体显示帖子相关信息 -->
      <!-- <h4 class="mt-0 header-title">最近十天发帖概况</h4> -->
                          
        <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="uid" label="用户名" width="150">
      <template #default="scope">
        <el-popover effect="light" trigger="hover" placement="top" width="auto">

          <template #reference>
            <el-tag>{{ scope.row.user_name }}</el-tag>
          </template>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column label="帖子内容" width="300">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-icon><timer /></el-icon>
          <span style="margin-left: 10px">{{ formatContent(scope.row.contents)}}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="话题" width="200">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-icon><timer /></el-icon>
          <span style="margin-left: 10px">{{ formatContent(scope.row.topic)}}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="发帖时间" width="200">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-icon><timer /></el-icon>
          <span style="margin-left: 10px">{{ scope.row.date }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="转发量" sortable width="150">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-icon><timer /></el-icon>
          <span style="margin-left: 10px">{{ scope.row.repost_num}}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="评论量" sortable width="150">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-icon><timer /></el-icon>
          <span style="margin-left: 10px">{{ scope.row.comment_num}}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="点赞量" sortable width="150">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-icon><timer /></el-icon>
          <span style="margin-left: 10px">{{ scope.row.like_num}}</span>
        </div>
      </template>
    </el-table-column>
    <!--删出详情的操作键 <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small" @click="detailDialog(scope.row.uid)"
        ><i class="iconfont icon-chakan"></i></el-button
      >
        <el-popconfirm
      confirm-button-text="是"
      cancel-button-text="否"
      :icon="InfoFilled"
      icon-color="#626AEF"
      title="你确定要删除吗?"
      @confirm="deleteClick(scope.row.uid)"
      >
  <template #reference>
    <el-button type="danger" size="small" @click="deleteClick"><i class="iconfont icon-lajitong"></i></el-button>
    </template>
</el-popconfirm>
      </template>
    </el-table-column> -->
  </el-table>
  
   <!-- 分页 -->
   <div class="table-page">
   <el-pagination
    v-model:current-page="currentPage"
    v-model:page-size="pageSize"
    :page-sizes="[5,10,20]"
    :small="small"
    :disabled="disabled"
    :background="background"
    layout="total,sizes,prev, pager, next, jumper"
    :total="pageInfo.total"  
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  /></div>
  
  <!-- 详情对话框 -->
   <!-- <el-dialog
  v-model="detailDialogVisible"
  title="查看评论信息"
  width="60%"
>
<el-descriptions :column="1" border>
  <el-descriptions-item label="用户名称">{{ tableData.user_name }}</el-descriptions-item>
  <el-descriptions-item label="帖子内容">{{ tableData.contents }}</el-descriptions-item>
  <el-descriptions-item label="话题">{{ tableData.topic }}</el-descriptions-item>
  <el-descriptions-item label="发帖时间">{{ tableData.date}}</el-descriptions-item>
  <el-descriptions-item label="转发量">{{ tableData.repost_num }}</el-descriptions-item>
  <el-descriptions-item label="评论量">{{ tableData.comment_num }}</el-descriptions-item>
  <el-descriptions-item label="点赞量">{{ tableData.like_num }}</el-descriptions-item>


</el-descriptions>
 <template #footer>
    <span class="dialog-footer">
      <el-button @click="detailDialogVisible = false">Cancel</el-button>
      <el-button type="primary" @click="detailDialogVisible = false">
        Confirm
      </el-button>
    </span>
  </template> 
    
</el-dialog> -->
      </el-main>
    </el-container>
  </div>
 </template>

 <script>
 import { ElMessage } from 'element-plus'
 import * as echarts from 'echarts'
 import VueEcharts from 'vue-echarts'
 import { ArrowLeft } from '@element-plus/icons-vue'

 import { ref } from 'vue'
 import { h } from 'vue'
 import { ElDivider } from 'element-plus' 

 import EchartsChart1 from './components/ContentsChart.vue'

//  import { Timer } from '@element-plus/icons-vue'
 const input = ref('')
 
 export default{

  setup() {
    const size = ref(50)
    const spacer = h(ElDivider, { direction: 'vertical' })
  },

  components:{
  EchartsChart1  //折线图

}, 

    data(){
      return {
        input: ref(''),
       drawer: ref(false),
       form: {},      //添加对话框
       detailDialogVisible: false,
       tableData: [],
       commentInfo: {},
       commentInfoData: [],
       countInfo:{},
       pageInfo:{},   //分页信息对象
        pageSize:20,    //当前页条数
        currentPage:1,  //当前页号
     }

    },
    mounted(){
      this.LoadData()   
      this.LoadCountInfoData()
      this.getPageData(1,5)

    },
    methods:{
      formatContent(contents) {
    const maxLength = 20; // 假设限制内容最大长度为 20
    if (contents.length > maxLength) {
      return contents.slice(0, maxLength) + '...';
    }
    return contents;
  },  //限制最大长度
      center(){
    this.$router.push('admincenter')
  },
  logout() {
    this.$router.push('/');
  },
  backout() {
    this.$router.push('/welcome');
  },
     handleSizeChange(pageSize) {   //选择每一页显示的记录数
       this.pageSize = pageSize
       this.getPageData(this.currentPage, this.pageSize)
       console.log("size:", pageSize);
     },
     handleCurrentChange(pageNum) {  //切换页号时得到当时页号
       this.currentPage = pageNum
       this.getPageData(this.currentPage, this.pageSize)
       console.log("num:", pageNum);

     },
     getPageData(num, size) {   //得到分页数据
       this.$http.get("http://localhost:8080/contents/pages", { params: { pageNum: num, pageSize: size } }).then((response) => {
         this.pageInfo = response.data
        //  this.tableData = this.pageInfo.list
       })
     },
      btnQuery(){
        console.log(this.formInline)
        this.LoadData()
      },
      LoadData(){              //加载数据
        this.$http.get("http://localhost:8080/contents/list1").then((res)=>{
        this.tableData = res.data;
        // this.pageInfo.total = res.data.length;
        console.log(res.data);
      }).catch((err)=>{
        console.log(err);
      })
    },
    LoadCountInfoData(){
      this.$http.get("http://localhost:8080/contents/list2").then((res)=>{
        this.countInfo = res.data[0]
        console.log(res.data[0]);
      }).catch((err)=>{
        console.log(err);
      })
    },
      deleteClick(mid) {    //删除操作
        console.log(mid);
        this.$http.get("http://localhost:8080/comment/del/" + mid).then((res) => {
          console.log(res.data);
          if (res.data == 1) {
            console.log("删除成功");
            this.LoadData()
            ElMessage({
              message: '删除成功',
              type: 'success',
            })
          } else {
            console.log("删除失败");
            this.LoadData()
            ElMessage({
              message: '删除失败',
              type: 'warning',
            })
          }
        }).catch((err) => {
          // console.log(err);
        })
      },
      detailDialog(mid) {   //详情操作
       console.log(mid);
       this.$http.get("http://localhost:8080/comment/get/" + mid).then((res)=>{
        console.log(res.data)
        this.commentInfo = res.data
       }).catch((err)=>{
         console.log(err);
       })
       this.detailDialogVisible = true
     }
  }

}
 </script>
 <style>
 .input-width {
    width: 40%; /* 设置宽度为100% */
    resize: none; /* 禁止调整大小 */
}
 .box{
  position: relative;
  top: 20px;
 }
 .table-page{
float:right;
margin:12px
}

 </style>